<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Button</title>
	
	<!-- ================= Favicon ================== -->
    <!-- Standard -->
    <link rel="shortcut icon" href="http://placehold.it/64.png/000/fff">
    <!-- Retina iPad Touch Icon-->
    <link rel="apple-touch-icon" sizes="144x144" href="http://placehold.it/144.png/000/fff">
    <!-- Retina iPhone Touch Icon-->
    <link rel="apple-touch-icon" sizes="114x114" href="http://placehold.it/114.png/000/fff">
    <!-- Standard iPad Touch Icon--> 
    <link rel="apple-touch-icon" sizes="72x72" href="http://placehold.it/72.png/000/fff">
    <!-- Standard iPhone Touch Icon--> 
    <link rel="apple-touch-icon" sizes="57x57" href="http://placehold.it/57.png/000/fff">

	<!-- Styles -->
    <link href="assets/css/lib/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="assets/css/lib/mmc-chat.css" rel="stylesheet" />
    <link href="assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/lib/simdahs.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>

<body>

    <div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
        <div class="nano">
            <div class="nano-content">
                <ul>
					<li class="label">Main</li>
                    <li class="active"><a href="index.html"><i class="ti-home"></i> Dashboard </a></li>	 
                    
                    
                    <li><a href="app-profile.html"><i class="ti-user"></i> Profile</a></li>
                    
                    
					
					<li class="label">Features</li>
					<li><a class="sidebar-sub-toggle"><i class="ti-layout"></i> UI Elements <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="ui-accordion.html">Accordion</a></li>
                            <li><a href="ui-alerts.html">Alerts</a></li>
                            <li><a href="ui-badges.html">Badges</a></li>
                            <li><a href="ui-button.html">Button</a></li>
                            <li><a href="ui-dropdown.html">Dropdown</a></li>
                            <li><a href="ui-images.html">Images</a></li>
                            <li><a href="ui-list-group.html">List Group</a></li>
                            <li><a href="ui-panels.html">Panels</a></li>
                            <li><a href="ui-progressbar.html">Progressbar</a></li>
                            <li><a href="ui-tab.html">Tab</a></li>
                            <li><a href="ui-wells.html">Wells</a></li>
                        </ul>
                    </li>
					<li><a class="sidebar-sub-toggle"><i class="ti-panel"></i> Components <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="uc-calendar.html">Calendar</a></li>
                            <li><a href="uc-carousel.html">Carousel</a></li>
                            <li><a href="uc-weather.html">Weather</a></li>
                            <li><a href="uc-datamap.html">Datamap</a></li>
                            <li><a href="uc-todo-list.html">To do</a></li>
                            <li><a href="uc-scrollable.html">Scrollable</a></li>
                            <li><a href="uc-sweetalert.html">Sweet Alert</a></li>
                            <li><a href="uc-toastr.html">Toastr</a></li>
                            <li><a href="uc-range-slider-basic.html">Basic Range Slider</a></li>
                            <li><a href="uc-range-slider-advance.html">Advance Range Slider</a></li>
                            <li><a href="uc-nestable.html">Nestable</a></li>
                            <li><a href="uc-portlets.html">Portlets</a></li>
                            
                        </ul>
                    </li>
						
					
					<li><a class="sidebar-sub-toggle"><i class="ti-layout-grid4-alt"></i> Table <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="table-basic.html">Basic</a></li>
                            
                        </ul>
                    </li>
					
					<li><a class="sidebar-sub-toggle"><i class="ti-heart"></i> Icons <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="font-themify.html">Themify</a></li>
                        </ul>
                    </li>
					
					
					
					
					<li class="label">Form</li>
					<li><a href="form-basic.html"><i class="ti-view-list-alt"></i> Basic Form </a></li>
					
					
					
					<li><a class="sidebar-sub-toggle"><i class="ti-target"></i> Pages <span class="sidebar-collapse-icon ti-angle-down"></span></a>
                        <ul>
                            <li><a href="page-login.html">Login</a></li>
                            <li><a href="page-register.html">Register</a></li>
                            <li><a href="page-reset-password.html">Forgot password</a></li>
                        </ul>
                    </li>
					
                    <li><a href="../documentation/index.html"><i class="ti-file"></i> Documentation</a></li><li><a><i class="ti-close"></i> Logout</a></li>

                </ul>
            </div>
        </div>
    </div><!-- /# sidebar -->




    <div class="header">
        <div class="pull-left">
            <div class="logo" id="sideLogo">
                <a href="index.html">
                    <img class="full-logo" src="assets/images/logo-big.png" alt="SimDahs">
                    <img class="small-logo" src="assets/images/logo-small.png" alt="SimDahs">
                </a>
            </div>
            <div class="hamburger sidebar-toggle">
                <span class="ti-menu"></span>
            </div>
        </div>

        <div class="pull-right p-r-15">
            <ul>
                <li class="header-icon dib"><i class="ti-bell"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">Recent Notifications</span>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Mr. Wolf</div>
                                            <div class="notification-text">5 members joined today </div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sofiya</div>
                                            <div class="notification-text">likes a photo of you</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Richard</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-icon dib"><i class="ti-email"></i>
                    <div class="drop-down">
                        <div class="dropdown-content-heading">
                            <span class="text-left">2 New Messages</span>
                            <a href="email.html"><i class="ti-pencil-alt pull-right"></i></a>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/1.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">John Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li class="notification-unread">
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/3.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">John Doe</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img class="pull-left m-r-10 avatar-img" src="assets/images/avatar/2.jpg" alt="" />
                                        <div class="notification-content">
                                            <small class="notification-timestamp pull-right">02:34 PM</small>
                                            <div class="notification-heading">Sara Maggi</div>
                                            <div class="notification-text">Hi Teddy, Just wanted to let you ...</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="text-center">
                                    <a href="#" class="more-link">See All</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
				<li class="header-icon dib chat-sidebar-icon"><i class="ti-comment"></i></li>
                <li class="header-icon dib"><img class="avatar-img" src="assets/images/avatar/1.jpg" alt="" /> <span class="user-avatar">Wolf <i class="ti-angle-down f-s-10"></i></span>
                    <div class="drop-down dropdown-profile">
                        <div class="dropdown-content-heading">
                            <span class="text-left">Upgrade Now</span>
                            <p class="trial-day">30 Days Trail</p>
                        </div>
                        <div class="dropdown-content-body">
                            <ul>
                                <li><a href="#"><i class="ti-user"></i> <span>Profile</span></a></li>
                                <li><a href="#"><i class="ti-wallet"></i> <span>My Balance</span></a></li>
                                <li><a href="#"><i class="ti-write"></i> <span>My Task</span></a></li>
                                <li><a href="#"><i class="ti-calendar"></i> <span>My Calender</span></a></li>
                                <li><a href="#"><i class="ti-email"></i> <span>Inbox</span></a></li>
                                <li><a href="#"><i class="ti-settings"></i> <span>Setting</span></a></li>
                                <li><a href="#"><i class="ti-help-alt"></i> <span>Help</span></a></li>
                                <li><a href="#"><i class="ti-lock"></i> <span>Lock Screen</span></a></li>
                                <li><a href="#"><i class="ti-power-off"></i> <span>Logout</span></a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

	<div class="chat-sidebar">
        <!-- BEGIN chat -->
        <div id="mmc-chat" class="color-default">
            <!-- BEGIN CHAT BOX -->
            <div class="chat-box">
                <!-- BEGIN CHAT BOXS -->
                <ul class="boxs"></ul>
                <!-- END CHAT BOXS -->
                <div class="icons-set">
                    <div class="stickers">
                        <div class="had-container">
                            <div class="row">
                                <div class="s12">
                                    <ul class="tabs" style="width: 100%;height: 60px;">
                                        <li class="tab col s3">
                                            <a href="#tab1" class="active">
                                                <img src="images/1.png" alt="" />
                                            </a>
                                        </li>
                                        <li class="tab col s3"><a href="#tab2">Test 2</a></li>
                                    </ul>
                                </div>
                                <div id="tab1" class="s12 tab-content">
                                    <ul>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                        <li><img src="images/1.png" alt="" /></li>
                                    </ul>
                                </div>
                                <div id="tab2" class="s12 tab-content">Test 2</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END CHAT BOX -->
            <!-- BEGIN SIDEBAR -->
            <div id="sidebar" class="right scroll">
                <div class="had-container">
                    <!-- BEGIN USERS -->
                    <div class="users">

                        <ul class="user-list">
                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="1" data-status="online" data-username="Rufat Askerov" data-position="left" data-filter-item data-filter-name="rufat askerov">
                                <!-- BEGIN USER IMAGE-->
                                <div class="user-image">
                                    <img src="assets/images/avatar/1.jpg" class="avatar" alt="Rufat Askerov" />
                                </div>
                                <!-- END USER IMAGE-->
                                <!-- BEGIN USERNAME-->
                                <span class="user-name">Rufat Askerov</span>
								<span class="user-show"></span>
                                <!-- END USERNAME-->
                            </li>
                            <!-- END USER-->
                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="3" data-status="online" data-username="Alice" data-position="left" data-filter-item data-filter-name="alice">
                                <div class="user-image">
                                    <img src="assets/images/avatar/1.jpg" class="avatar" alt="Alice" />
                                </div>
                                <span class="user-name">Alice</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="7" data-status="offline" data-username="Michael Scofield" data-position="left" data-filter-item data-filter-name="michael scofield">
                                <div class="user-image">
                                    <img src="assets/images/avatar/1.jpg" class="avatar" alt="Michael Scofield" />
                                </div>
                                <span class="user-name">Michael Scofield</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="5" data-status="online" data-username="Irina Shayk" data-position="left" data-filter-item data-filter-name="irina shayk">
                                <div class="user-image">
                                    <img src="assets/images/avatar/1.jpg" class="avatar" alt="Irina Shayk" />
                                </div>
                                <span class="user-name">Irina Shayk</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="6" data-status="offline" data-username="Sara Tancredi" data-position="left" data-filter-item data-filter-name="sara tancredi">
                                <div class="user-image">
                                    <img src="assets/images/avatar/1.jpg" class="avatar" alt="Sara Tancredi" />
                                </div>
                                <span class="user-name">Sara Tancredi</span>
								<span class="user-show"></span>
                            </li>

                            <!-- BEGIN USER-->
                            <li class="user-tooltip" data-id="7" data-status="offline" data-username="Wolf" data-position="left" data-filter-item data-filter-name="Wolf">
                                <div class="user-image">
                                    <img src="assets/images/avatar/1.jpg" class="avatar" alt="Wolf" />
                                </div>
                                <span class="user-name">Wolf</span>
								<span class="user-show"></span>
                            </li>
                        </ul>
						<div class="chat-user-search">
							<div class="input-group">
								<span class="input-group-addon"><i class="ti-search"></i></span>
								<input type="text" class="form-control" placeholder="Search"  data-search />
							</div>
						</div>
                    </div>
                    <!-- END USERS -->

                </div>
            </div>
            <!-- END SIDEBAR -->
        </div>
        <!-- END chat -->
    </div>
    <!-- END chat Sidebar-->



    <div class="content-wrap">
        <div class="main">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-8 p-0">
                        <div class="page-header">
							<div class="page-title">
								<h1>Dashboard 1</h1>
							</div>
						</div>
                    </div><!-- /# column -->
                    <div class="col-lg-4 p-0">
                        <div class="page-header">
							<div class="page-title">
								<ol class="breadcrumb text-right">
									<li><a href="#">Dashboard</a></li>
									<li><a href="#">UI Elements</a></li>
									<li class="active">Button</li>
								</ol>
							</div>
						</div>
                    </div><!-- /# column -->
                </div><!-- /# row -->
				
				<div class="main-content">
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Default Button Style </h4>
									
								</div>
								<div class="button-list">
									<p class="text-muted m-b-15">
										Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
									</p>
									<button type="button" class="btn btn-default m-b-10">Default</button>
									<button type="button" class="btn btn-primary m-b-10 m-l-5">Primary</button>
									<button type="button" class="btn btn-success m-b-10 m-l-5">Success</button>
									<button type="button" class="btn btn-info m-b-10 m-l-5">Info</button>
									<button type="button" class="btn btn-warning m-b-10 m-l-5">Warning</button>
									<button type="button" class="btn btn-danger m-b-10 m-l-5">Danger</button>
									<button type="button" class="btn btn-pink m-b-10 m-l-5">Pink</button>
									<button type="button" class="btn btn-dark m-b-10 m-l-5">Dark</button>
									<button type="button" class="btn btn-link m-b-10 m-l-5">Link</button>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Rounded Button </h4>
									
								</div>
								<div class="button-list">
									<p class="text-muted m-b-15">
										Add <code>.btn-rounded</code> to get clean rounded button.
									</p>
									<button type="button" class="btn btn-default btn-rounded m-b-10">Default</button>
									<button type="button" class="btn btn-primary btn-rounded m-b-10 m-l-5">Primary</button>
									<button type="button" class="btn btn-success btn-rounded m-b-10 m-l-5">Success</button>
									<button type="button" class="btn btn-info btn-rounded m-b-10 m-l-5">Info</button>
									<button type="button" class="btn btn-warning btn-rounded m-b-10 m-l-5">Warning</button>
									<button type="button" class="btn btn-danger btn-rounded m-b-10 m-l-5">Danger</button>
									<button type="button" class="btn btn-pink btn-rounded m-b-10 m-l-5">Pink</button>
									<button type="button" class="btn btn-dark btn-rounded m-b-10 m-l-5">Dark</button>
									<button type="button" class="btn btn-link btn-rounded m-b-10 m-l-5">Link</button>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Outline Button </h4>
									
									
								</div>
								<div class="button-list">
									<p class="text-muted m-b-15">
										Add <code>.btn-outline</code>, <code>.btn-rounded</code> to get clean outline rounded button.
									</p>
									<button type="button" class="btn btn-default btn-outline m-b-10">Default</button>
									<button type="button" class="btn btn-primary btn-outline m-b-10 m-l-5">Primary</button>
									<button type="button" class="btn btn-success btn-outline m-b-10 m-l-5">Success</button>
									<button type="button" class="btn btn-info btn-outline m-b-10 m-l-5">Info</button>
									<button type="button" class="btn btn-warning btn-outline m-b-10 m-l-5">Warning</button>
									<button type="button" class="btn btn-danger btn-outline m-b-10 m-l-5">Danger</button>
									<button type="button" class="btn btn-pink btn-outline m-b-10 m-l-5">Pink</button>
									<button type="button" class="btn btn-dark btn-outline m-b-10 m-l-5">Dark</button>
									<button type="button" class="btn btn-link btn-outline m-b-10 m-l-5">Link</button>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Outline Button </h4>
									
								</div>
								<div class="button-list">
									<p class="text-muted m-b-15">
										Add <code>.btn-outline</code>, <code>.btn-rounded</code> to get clean outline rounded button.
									</p>
									<button type="button" class="btn btn-default btn-outline btn-rounded m-b-10">Default</button>
									<button type="button" class="btn btn-primary btn-outline btn-rounded m-b-10 m-l-5">Primary</button>
									<button type="button" class="btn btn-success btn-outline btn-rounded m-b-10 m-l-5">Success</button>
									<button type="button" class="btn btn-info btn-outline btn-rounded m-b-10 m-l-5">Info</button>
									<button type="button" class="btn btn-warning btn-outline btn-rounded m-b-10 m-l-5">Warning</button>
									<button type="button" class="btn btn-danger btn-outline btn-rounded m-b-10 m-l-5">Danger</button>
									<button type="button" class="btn btn-pink btn-outline btn-rounded m-b-10 m-l-5">Pink</button>
									<button type="button" class="btn btn-dark btn-outline btn-rounded m-b-10 m-l-5">Dark</button>
									<button type="button" class="btn btn-link btn-outline btn-rounded m-b-10 m-l-5">Link</button>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					
					<div class="row">
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Flat Button </h4>
									
								</div>
								<div class="button-list">
									<p class="text-muted m-b-15">
										Add <code>.btn-flat</code> to get clean flat button.
									</p>
									<button type="button" class="btn btn-default btn-flat m-b-10">Default</button>
									<button type="button" class="btn btn-primary btn-flat m-b-10 m-l-5">Primary</button>
									<button type="button" class="btn btn-success btn-flat m-b-10 m-l-5">Success</button>
									<button type="button" class="btn btn-info btn-flat m-b-10 m-l-5">Info</button>
									<button type="button" class="btn btn-warning btn-flat m-b-10 m-l-5">Warning</button>
									<button type="button" class="btn btn-danger btn-flat m-b-10 m-l-5">Danger</button>
									<button type="button" class="btn btn-pink btn-flat m-b-10 m-l-5">Pink</button>
									<button type="button" class="btn btn-dark btn-flat m-b-10 m-l-5">Dark</button>
									<button type="button" class="btn btn-link btn-flat m-b-10 m-l-5">Link</button>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Button Addon </h4>
									
								</div>
								<div class="button-list">
									<p class="text-muted m-b-15">
										Add <code>.btn-addon</code>,<code>.btn-addon i</code>  to get clean button addon.
									</p>
									<button type="button" class="btn btn-primary btn-flat btn-addon m-b-10 m-l-5"><i class="ti-plus"></i>Primary</button>
									<button type="button" class="btn btn-success btn-flat btn-addon m-b-10 m-l-5"><i class="ti-minus"></i>Success</button>
									<button type="button" class="btn btn-info btn-flat btn-addon m-b-10 m-l-5"><i class="ti-close"></i>Info</button>
									<button type="button" class="btn btn-warning btn-flat btn-addon m-b-10 m-l-5"><i class="ti-user"></i>Warning</button>
									<button type="button" class="btn btn-danger btn-flat btn-addon m-b-10 m-l-5"><i class="ti-settings"></i>Danger</button>
									<button type="button" class="btn btn-pink btn-flat btn-addon m-b-10"><i class="ti-search"></i>Pink</button>
									
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Button Size </h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">
										Add <code>.btn-lg</code>, <code>.btn-md</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.
									</p>
								<div class="button-list">
									<button type="button" class="btn btn-default btn-lg m-b-10">Large</button>
									<button type="button" class="btn btn-primary btn-md m-b-10 m-l-5">Medium</button>
									<button type="button" class="btn btn-success btn-sm m-b-10 m-l-5">Small</button>
									<button type="button" class="btn btn-info btn-xs m-b-10 m-l-5">Extra Small</button>
								</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Button Addon Size </h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">
										Add <code>.btn-addon.btn-lg, .btn-addon.btn-lg i </code>for button addon size.
									</p>
									<div class="button-list">
										<button type="button" class="btn btn-primary btn-flat btn-addon btn-lg m-b-10 m-l-5"><i class="ti-user"></i>Primary</button>
										<button type="button" class="btn btn-success btn-flat btn-addon btn-md m-b-10 m-l-5"><i class="ti-search"></i>Success</button>
										<button type="button" class="btn btn-info btn-flat btn-addon btn-sm m-b-10 m-l-5"><i class="ti-close"></i>Info</button>
										<button type="button" class="btn btn-danger btn-flat btn-addon btn-xs m-b-10"><i class="ti-settings"></i>Danger</button>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Block Level Buttons</h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">Add class <code>.btn-block</code> to create a block level button:</p>
									<div class="button-list">
										 <button type="button" class="btn btn-default btn-block m-b-10">Primary Button</button>
										 <button type="button" class="btn btn-primary btn-block m-b-10">Primary Button</button>
									
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Active/Disabled Buttons</h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">The class <code>.active</code> makes a button appear pressed, and the class <code>.disabled</code> makes a button unclickable:</p>
									<div class="button-list">
										 <button type="button" class="btn btn-primary active">Active Primary</button>
										<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Button Groups</h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">Use a <code>&lt;div&gt;</code> element with class <code>.btn-group</code> to create a button group:</p>
									<div class="button-list">
										 <div class="btn-group">
											<button type="button" class="btn btn-primary">Apple</button>
											<button type="button" class="btn btn-primary">Samsung</button>
											<button type="button" class="btn btn-primary">Sony</button>
										</div>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Vertical Button Groups</h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">Use the class <code>.btn-group-vertical</code> to create a vertical button group:</p>
									<div class="button-list">
										<div class="btn-group-vertical">
											<button type="button" class="btn btn-primary">Apple</button>
											<button type="button" class="btn btn-primary">Samsung</button>
											<button type="button" class="btn btn-primary">Sony</button>
										</div>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Justified Button Groups</h4>
									
								</div>
								<div class="card-toggle-body">
									<p class="text-muted m-b-15">To span the entire width of the screen, use the <code class="w3-codespan">.btn-group-justified</code> class:</p>
									<div class="button-list">
										<div class="btn-group btn-group-justified">
											<a href="#" class="btn btn-primary">Apple</a>
											<a href="#" class="btn btn-primary">Samsung</a>
											<a href="#" class="btn btn-primary">Sony</a>
										</div>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Nesting Button Groups & Dropdown Menus</h4>
									
								</div>
								<div class="card-toggle-body">
								<p class="m-b-15">Nest button groups to create dropdown menus:</p>
									<div class="btn-group">
									  <button type="button" class="btn btn-primary">Apple</button>
									  <button type="button" class="btn btn-primary">Samsung</button>
									  <div class="btn-group">
										<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
										Sony <span class="caret"></span></button>
										<ul class="dropdown-menu" role="menu">
										  <li><a href="#">Tablet</a></li>
										  <li><a href="#">Smartphone</a></li>
										</ul>
									  </div>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->
					
					<div class="row">
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Split Button Dropdowns</h4>
									
								</div>
								<div class="card-toggle-body">
									 <div class="btn-group">
									  <button type="button" class="btn btn-primary">Sony</button>
									  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
										<span class="caret"></span>
									  </button>
									  <ul class="dropdown-menu" role="menu">
										<li><a href="#">Tablet</a></li>
										<li><a href="#">Smartphone</a></li>
									  </ul>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
						
						<div class="col-lg-6">
							<div class="card alert">
								<div class="card-header">
									<h4>Nesting Button Groups & Dropdown Menus</h4>
									
								</div>
								<div class="card-toggle-body">
								<p class="m-b-15">Nest button groups to create dropdown menus:</p>
									<div class="btn-group">
									  <button type="button" class="btn btn-primary">Apple</button>
									  <button type="button" class="btn btn-primary">Samsung</button>
									  <div class="btn-group">
										<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
										Sony <span class="caret"></span></button>
										<ul class="dropdown-menu" role="menu">
										  <li><a href="#">Tablet</a></li>
										  <li><a href="#">Smartphone</a></li>
										</ul>
									  </div>
									</div>
								</div>
							</div><!-- /# card -->
						</div><!-- /# column -->
					</div><!-- /# row -->     </div>
     <!-- /# main content -->Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
            </div><!-- /# container-fluid -->
        </div><!-- /# main -->
    </div><!-- /# content wrap -->
	







    <script src="assets/js/lib/jquery.min.js"></script><!-- jquery vendor -->
    <script src="assets/js/lib/jquery.nanoscroller.min.js"></script><!-- nano scroller -->    
    <script src="assets/js/lib/sidebar.js"></script><!-- sidebar -->
    <script src="assets/js/lib/bootstrap.min.js"></script><!-- bootstrap -->
    <script src="assets/js/lib/mmc-common.js"></script>
    <script src="assets/js/lib/mmc-chat.js"></script>
    <script src="assets/js/scripts.js"></script><!-- scripit init-->


    


</body>

</html>